<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>可视化综合项目</title>
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./fonts/icomoon.css">
    <link rel="stylesheet" href="./css/index.css">
    <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon">
    <script src="./js/jquery-1.12.4.js"></script>
    <script src="./js/echarts.js"></script>
    <script src="./js/china.js"></script>
    <script src="./js/index.js"></script>
</head>
<body>
    <!-- 将整个页面分成左中右三个部分,每个部分再细分 -->
    <div class="contain">
        <!-- 1.左边的大盒子 -->
        <div class="column">
            <!-- 1.1综合概览 -->
            <div class="overview borderImg">
                <div class="inner">
                    <div class="item">
                        <p>2,190</p>
                        <span class="icon-dot"></span>设备总数
                    </div>
                    <div class="item">
                        <p>190</p>
                        <span class="icon-dot"></span>季度新增
                    </div>
                    <div class="item">
                        <p>3,001</p>
                        <span class="icon-dot"></span>运营设备
                    </div>
                    <div class="item">
                        <p>108</p>
                        <span class="icon-dot"></span>异常设备
                    </div>
                </div>
            </div>
            <!-- 1.2故障监控 -->
            <div class="monitor borderImg">
                <div class="inner">
                   <div class="tab">
                       <a href="javasrcipt:void(0)" class="active">故障设备监控</a>
                       <a href="javasrcipt:void(0)">异常设备监控</a>
                   </div>
                   <div class="content">
                       <div class="head">
                           <span>故障时间</span>
                           <span>故障地址</span>
                           <span>故障代码</span>
                       </div>
                       <div class="carousel">
                       <ul>
                            <li>
                                <span>20200805</span>
                                <span>传智播客黑马程序员深圳校区58期都是大帅比</span>
                                <span>1000001</span>
                            </li>
                            <li>
                                <span>20200805</span>
                                <span>传智播客黑马程序员深圳校区58期都是大帅比</span>
                                <span>1000002</span>
                            </li>
                            <li>
                                <span>20200805</span>
                                <span>传智播客黑马程序员深圳校区58期都是大帅比</span>
                                <span>1000003</span>
                            </li>
                            <li>
                                <span>20200805</span>
                                <span>传智播客黑马程序员深圳校区58期都是大帅比</span>
                                <span>1000004</span>
                            </li>
                            <li>
                                <span>20200805</span>
                                <span>传智播客黑马程序员深圳校区58期都是大帅比</span>
                                <span>1000005</span>
                            </li>
                            <li>
                                <span>20200805</span>
                                <span>传智播客黑马程序员深圳校区58期都是大帅比</span>
                                <span>1000006</span>
                            </li>
                            <li>
                                <span>20200805</span>
                                <span>传智播客黑马程序员深圳校区58期都是大帅比</span>
                                <span>1000007</span>
                            </li>
                            <li>
                                <span>20200805</span>
                                <span>传智播客黑马程序员深圳校区58期都是大帅比</span>
                                <span>1000008</span>
                            </li>
                            <li>
                                <span>20200805</span>
                                <span>传智播客黑马程序员深圳校区58期都是大帅比</span>
                                <span>1000009</span>
                            </li>
                            <li>
                                <span>20200805</span>
                                <span>传智播客黑马程序员深圳校区58期都是大帅比</span>
                                <span>10000010</span>
                            </li>
                            <li>
                                <span>20200805</span>
                                <span>传智播客黑马程序员深圳校区58期都是大帅比</span>
                                <span>10000011</span>
                            </li>
                            <li>
                                <span>20200805</span>
                                <span>传智播客黑马程序员深圳校区58期都是大帅比</span>
                                <span>10000012</span>
                            </li>
                            <li>
                                <span>20200805</span>
                                <span>传智播客黑马程序员深圳校区58期都是大帅比</span>
                                <span>10000013</span>
                            </li>
                            <li>
                                <span>20200805</span>
                                <span>传智播客黑马程序员深圳校区58期都是大帅比</span>
                                <span>10000014</span>
                            </li>
                            <li>
                                <span>20200805</span>
                                <span>传智播客黑马程序员深圳校区58期都是大帅比</span>
                                <span>10000015</span>
                            </li>
                            <li>
                                <span>20200805</span>
                                <span>传智播客黑马程序员深圳校区58期都是大帅比</span>
                                <span>1000001</span>
                            </li>
                            <li>
                                <span>20200805</span>
                                <span>传智播客黑马程序员深圳校区58期都是大帅比</span>
                                <span>1000002</span>
                            </li>
                            <li>
                                <span>20200805</span>
                                <span>传智播客黑马程序员深圳校区58期都是大帅比</span>
                                <span>1000003</span>
                            </li>
                            <li>
                                <span>20200805</span>
                                <span>传智播客黑马程序员深圳校区58期都是大帅比</span>
                                <span>1000004</span>
                            </li>
                            <li>
                                <span>20200805</span>
                                <span>传智播客黑马程序员深圳校区58期都是大帅比</span>
                                <span>1000005</span>
                            </li>
                            <li>
                                <span>20200805</span>
                                <span>传智播客黑马程序员深圳校区58期都是大帅比</span>
                                <span>1000006</span>
                            </li>
                            <li>
                                <span>20200805</span>
                                <span>传智播客黑马程序员深圳校区58期都是大帅比</span>
                                <span>1000007</span>
                            </li>
                            <li>
                                <span>20200805</span>
                                <span>传智播客黑马程序员深圳校区58期都是大帅比</span>
                                <span>1000008</span>
                            </li>
                            <li>
                                <span>20200805</span>
                                <span>传智播客黑马程序员深圳校区58期都是大帅比</span>
                                <span>1000009</span>
                            </li>
                            <li>
                                <span>20200805</span>
                                <span>传智播客黑马程序员深圳校区58期都是大帅比</span>
                                <span>10000010</span>
                            </li>
                       </ul>
                    </div>
                   </div>
                   <div class="content" style="display: none;">
                        <div class="head">
                            <span>异常时间</span>
                            <span>设备地址</span>
                            <span>异常代码</span>
                        </div>
                        <div class="carousel">
                        <ul>
                            <li>
                                <span>20200805</span>
                                <span>深圳市宝安区创维创新谷B座南区401 58期</span>
                                <span>200011</span>
                            </li>
                            <li>
                                <span>20200805</span>
                                <span>深圳市宝安区创维创新谷B座南区401 58期</span>
                                <span>200012</span>
                            </li>
                            <li>
                                <span>20200805</span>
                                <span>深圳市宝安区创维创新谷B座南区401 58期</span>
                                <span>200013</span>
                            </li>
                            <li>
                                <span>20200805</span>
                                <span>深圳市宝安区创维创新谷B座南区401 58期</span>
                                <span>200014</span>
                            </li>
                            <li>
                                <span>20200805</span>
                                <span>深圳市宝安区创维创新谷B座南区401 58期</span>
                                <span>200015</span>
                            </li>
                            <li>
                                <span>20200805</span>
                                <span>深圳市宝安区创维创新谷B座南区401 58期</span>
                                <span>200016</span>
                            </li>
                            <li>
                                <span>20200805</span>
                                <span>深圳市宝安区创维创新谷B座南区401 58期</span>
                                <span>200017</span>
                            </li>
                            <li>
                                <span>20200805</span>
                                <span>深圳市宝安区创维创新谷B座南区401 58期</span>
                                <span>200018</span>
                            </li>
                            <li>
                                <span>20200805</span>
                                <span>深圳市宝安区创维创新谷B座南区401 58期</span>
                                <span>200019</span>
                            </li>
                            <li>
                                <span>20200805</span>
                                <span>深圳市宝安区创维创新谷B座南区401 58期</span>
                                <span>2000110</span>
                            </li>
                            <li>
                                <span>20200805</span>
                                <span>深圳市宝安区创维创新谷B座南区401 58期</span>
                                <span>2000111</span>
                            </li>
                            <li>
                                <span>20200805</span>
                                <span>深圳市宝安区创维创新谷B座南区401 58期</span>
                                <span>2000112</span>
                            </li>
                            <li>
                                <span>20200805</span>
                                <span>深圳市宝安区创维创新谷B座南区401 58期</span>
                                <span>2000113</span>
                            </li>
                            <li>
                                <span>20200805</span>
                                <span>深圳市宝安区创维创新谷B座南区401 58期</span>
                                <span>2000114</span>
                            </li>
                            <li>
                                <span>20200805</span>
                                <span>深圳市宝安区创维创新谷B座南区401 58期</span>
                                <span>2000115</span>
                            </li>
                            <li>
                                <span>20200805</span>
                                <span>深圳市宝安区创维创新谷B座南区401 58期</span>
                                <span>200011</span>
                            </li>
                            <li>
                                <span>20200805</span>
                                <span>深圳市宝安区创维创新谷B座南区401 58期</span>
                                <span>200012</span>
                            </li>
                            <li>
                                <span>20200805</span>
                                <span>深圳市宝安区创维创新谷B座南区401 58期</span>
                                <span>200013</span>
                            </li>
                            <li>
                                <span>20200805</span>
                                <span>深圳市宝安区创维创新谷B座南区401 58期</span>
                                <span>200014</span>
                            </li>
                            <li>
                                <span>20200805</span>
                                <span>深圳市宝安区创维创新谷B座南区401 58期</span>
                                <span>200015</span>
                            </li>
                            <li>
                                <span>20200805</span>
                                <span>深圳市宝安区创维创新谷B座南区401 58期</span>
                                <span>200016</span>
                            </li>
                            <li>
                                <span>20200805</span>
                                <span>深圳市宝安区创维创新谷B座南区401 58期</span>
                                <span>200017</span>
                            </li>
                            <li>
                                <span>20200805</span>
                                <span>深圳市宝安区创维创新谷B座南区401 58期</span>
                                <span>200018</span>
                            </li>
                            <li>
                                <span>20200805</span>
                                <span>深圳市宝安区创维创新谷B座南区401 58期</span>
                                <span>200019</span>
                            </li>
                            <li>
                                <span>20200805</span>
                                <span>深圳市宝安区创维创新谷B座南区401 58期</span>
                                <span>2000110</span>
                            </li>
                        </ul>
                        </div>
                   </div>
                </div>
            </div>
            <!-- 1.3点位分布 -->
            <div class="pointer borderImg">
                <div class="inner">
                    <h3>点位分布统计</h3>
                    <div class="pie fl"></div>
                    <div class="data fr">
                        <div class="item">
                            <p>320,11</p>
                            <span class="icon-dot"></span>点位总数
                        </div>
                        <div class="item">
                            <p>418</p>
                            <span class="icon-dot"></span>本月新增
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 2.中间大盒子 -->
        <div class="column">
            <!-- 2.1迁徙图 -->
            <div class="map">
                <h3><span class="icon-cube"></span> 设备数据统计</h3>
                <div class="echarts">
                    <div class="geo"></div>
                </div>
            </div>
            <!-- 2.2用户统计 -->
            <div class="user borderImg">
                <div class="inner">
                    <h3>全国用户总量统计</h3>
                    <div class="line fl"></div>
                    <div class="data fr">
                        <div class="item">
                            <p>120,899</p>
                            <span class="icon-dot"></span>用户总量
                        </div>
                        <div class="item">
                            <p>248</p>
                            <span class="icon-dot"></span>本月新增
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 3.右边的大盒子 -->
        <div class="column">
            <!-- 3.1订单量统计 -->
            <div class="order borderImg">
                <div class="inner">
                    <div class="head">
                        <a href="javascript:void(0)">365天</a>
                        <span></span>
                        <a href="javascript:void(0)">90天</a>
                        <span></span>
                        <a href="javascript:void(0)">30天</a>
                        <span></span>
                        <a href="javascript:void(0)" class="active">24小时</a>
                    </div>
                    <div class="data">
                        <div class="item">
                            <p>987</p>
                            <span><i class="icon-dot"></i>订单量</span>
                        </div>
                        <div class="item">
                            <p>834</p>
                            <span><i class="icon-dot"></i>销售额(万元)</span>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 3.2销售额统计 -->
            <div class="sales borderImg">
                <div class="inner">
                    <div class="head">
                        <h3>销售额统计</h3>
                        <a href="javascript:void(0)" class="active">年</a>
                        <a href="javascript:void(0)">季</a>
                        <a href="javascript:void(0)">月</a>
                        <a href="javascript:void(0)">周</a>
                    </div>
                    <div class="data"></div>
                </div>
            </div>
            <!-- 3.3渠道统计 -->
            <div class="channel">
                <div class="left borderImg fl">
                    <div class="inner">
                        <div class="head">
                            <h3>渠道分布</h3>
                        </div>
                        <div class="data">
                            <div class="item">
                                <p><b>39</b><small>%</small></p>
                                <span><i class="icon-plane"></i>机场</span>
                            </div>
                            <div class="item">
                                <p><b>28</b><small>%</small></p>
                                <span><i class="icon-bag"></i>商场</span>
                            </div>
                            <div class="item">
                                <p><b>20</b><small>%</small></p>
                                <span><i class="icon-train"></i>地铁</span>
                            </div>
                            <div class="item">
                                <p><b>13</b><small>%</small></p>
                                <span><i class="icon-bus"></i>火车站</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="right borderImg fr">
                    <div class="inner">
                        <div class="head">
                            <h3>一季度销售进度</h3>
                        </div>
                        <div class="echarts">
                            <div class="data"></div>
                            <p><span>75</span><small>%</small></p>
                        </div>
                        <div class="data">
                            <div class="item">
                                <p>1,321</p>
                                <span><i class="icon-dot"></i>销售额</span>
                            </div>
                            <div class="item">
                                <p>150%</p>
                                <span><i class="icon-dot"></i>同比增长</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 3.4热榜统计 -->
            <div class="hot borderImg">
                <div class="inner">
                    <div class="left">
                        <div class="head">
                            <h3>全国热榜</h3>
                        </div>
                        <div class="data">
                            <div class="item"><span><i class="icon-cup1"></i>可爱多</span></div>
                            <div class="item"><span><i class="icon-cup2"></i>娃哈哈</span></div>
                            <div class="item"><span><i class="icon-cup3"></i>喜之郎</span></div>
                        </div>
                    </div>
                    <div class="right">
                        <div class="head clearfix">
                            <h3>各省热销</h3>
                            <i>// 近30日 //</i>
                        </div>
                        <div class="data">
                            <ul class="fl">
                                <li class="active">
                                    <p>北京</p>
                                    <span>25,179</span>
                                    <i class="icon-up" style="color: #dc3c33;"></i>
                                </li>
                                <li>
                                    <p>河北</p>
                                    <span>23,252</span>
                                    <i class="icon-down" style="color: #36be90;"></i>
                                </li>
                                <li>
                                    <p>上海</p>
                                    <span>20,760</span>
                                    <i class="icon-up" style="color: #dc3c33;"></i>
                                </li>
                                <li>
                                    <p>江苏</p>
                                    <span>23,252</span>
                                    <i class="icon-down" style="color: #36be90;"></i>
                                </li>
                                <li>
                                    <p>山东</p>
                                    <span>20,760</span>
                                    <i class="icon-up" style="color: #dc3c33;"></i>
                                </li>
                            </ul>
                            <ul class="fr">
                                <li>
                                    <p>八喜</p>
                                    <span>6,080</span>
                                    <i class="icon-up" style="color: #dc3c33;"></i>
                                </li>
                                <li>
                                    <p>好多鱼</p>
                                    <span>2,170</span>
                                    <i class="icon-up" style="color: #dc3c33;"></i>
                                </li>
                                <li>
                                    <p>娃哈哈</p>
                                    <span>8,341</span>
                                    <i class="icon-up" style="color: #dc3c33;"></i>
                                </li>
                                <li>
                                    <p>可爱多</p>
                                    <span>9,086</span>
                                    <i class="icon-up" style="color: #dc3c33;"></i>
                                </li>
                                <li>
                                    <p>喜之郎</p>
                                    <span>7,407</span>
                                    <i class="icon-up" style="color: #dc3c33;"></i>
                                </li>
                                <li>
                                    <p>小洋人</p>
                                    <span>6,724</span>
                                    <i class="icon-up" style="color: #dc3c33;"></i>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
</body>
</html>
